<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
		<style type="text/css">
			.top {
				width: 200px;
				height: 100px;
				background: pink;
				margin: 0px 0px 10px 0px;
			}
			
			#main {
				width: 200px;
				height: 300px;
				background: orange;
			}
		</style>
	</head>

	<body>
		<div class="top">
			第一个
		</div>
		<div class="top">
			第二个
		</div>
		<div class="top">
			第三个
		</div>
		<div id="main" onmousemove="test()">
			main div
		</div>
		<script type="text/javascript">
			function test(){
				$("#main").css("background","red");
			}
			$("#top").addClass("top");
			$("#main").addClass("main");
			$("#main").hide();
			//鼠标悬浮
			$(".top").mousemove(function() {
				$("#main").show();
			});
			//鼠标离开
			$(".top").mouseout(function() {
				$("#main").hide();
			});
			//鼠标悬浮并离开
			$(".top").hover(function() {
				var t = $(this).text();
				$("#main").html(t);
			}, function() {
				$("#main").html("");
			});
		</script>
	</body>

</html>